<template>
	<div class="ordergo">
        <div class="productSeeall">
            <div class="img">
            	<img :src="shopform.image1" />
            </div>
			<div class="m20">
				<el-button class="gxb" type="primary" size="small" plain @click="fastlog = true"><i class="el-icon-warning"></i>根据国家工信部相关规定，请如实填写身份信息</el-button>
				<div class="me">
					<el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
						<el-form-item label="套餐类型">
							<el-input v-model="form.class" disabled="disabled" ></el-input>
						</el-form-item>
						<div class="xian"><span>|</span>实名信息</div>
						<el-form-item label="姓名">
							<el-input v-model="form.class" placeholder="请输入姓名"></el-input>
						</el-form-item>
						<el-form-item label="身份证号">
							<el-input v-model="form.class" placeholder="请输入身份证号"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" class="bor">
							<el-input v-model="form.class" placeholder="请输入联系电话"></el-input>
						</el-form-item>
						<div class="xian"><span>|</span>填写配送地址</div>
						<el-form-item label="所在城市">
							<div class="ch" @click="addresslog = true">
								<div>{{form.add}}</div>
								<div><i class="el-icon-arrow-right"></i></div>
							</div>
						</el-form-item>
						<el-form-item label="详细地址"  class="bor">
							<el-input v-model="form.ress" placeholder="请输入详细地址"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="tijiao"><el-button type="primary" size="small">提交信息</el-button></div>
				
				<van-popup v-model="addresslog" position="bottom"><van-area :area-list="areaList" @cancel="ssqx" @confirm = "ssq"/></van-popup>
			</div>
			

        </div>
		<el-dialog title="工信部规定及审核方式" :close-on-click-modal="false" :visible.sync="fastlog" width="90%">
			<span>
				根据国家工信部相关规定，所有手机号卡相关业务销售需进行实名验证，需要您提供身份证信息，审核通过后方可发货。<br/>
				您上传的身份证信息将严格保密，仅您授权的商户及运营商用于实名验证。<br/>
				在网上预选号卡环节，号卡业务经营者需要求用户提供姓名、身份号码、居民身份证正反面照片和用开卡人正面免冠照片。<br/>
				号卡业务经营者将该信息与“全国公民身份证号码查询服务”进行联网查验，并核实用户是否超出“一证五号”数量限制，核验通过后方可配送号卡。<br/>
				用户收到未激活的号卡后，应当通过在线视频实人认证方式进行验证， 号卡业务经营者应截取并留存用户照片，为用户激活号卡。
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button size="small"  type="primary" @click="fastlog = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

	

<script>
	import axios from 'axios'
	export default {
		name: 'ordergo',
		data () {
		  return {
			  shopform:{
			  	image1:"",
			  	title:"",
			  	description:"",
				id:""
			  },
			  shop_id:"",
			  fastlog:false,
			  form:{
				  class:"",
				  city:"",
				  add:"请选择",
				  ress:""
			  },
			  areaList:{},
			  addresslog:false
		  }
		},
		created() {
            var that = this
			this.getshopdetail()
            console.log(this.$route.query.share_id)
            //根据连接如果有share_id直接按share_id,没有就获取店铺id，获取需要登录
            if(this.$route.query.share_id == "" || this.$route.query.share_id == undefined){
                axios.get('/api/gth/user/shop')
                    .then(response => {
                        if(response.data.msg.code == 0){
                            this.shop_id = response.data.data.shop_id
                        }else{
                            if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                            that.$message.error(response.data.msg.info);
                        }
                    })
            }else{
                this.shop_id = this.$route.query.share_id
            }
			//调取省市区数据
			axios.get('./static/json/area.json')
				.then(response => {
					this.areaList = response.data
				})
		},
		methods:{
			ssq:function(r){
				this.form.add = r[0].name + r[1].name + r[2].name
				this.addresslog = false
			},
			ssqx:function(r){
				this.addresslog = false
			},
			changeaddress:function(){

			},
			tiaozhuan:function(){
				var user = JSON.parse(localStorage.getItem('USER'));
				if(this.$route.query.id == "" || this.$route.query.id == undefined){
					this.id = this.$route.query.order_page_id;
				}else{
					this.id = this.$route.query.id;
				}
				window.open(window.location.origin+"/webapp/merchant/templet1.html?id="+this.id+"&share_id="+this.shop_id)
			},
			//获取商品品详情
			getshopdetail:function(){
				var that = this;
				if(this.$route.query.id == "" || this.$route.query.id == undefined){
					this.id = this.$route.query.order_page_id;
				}else{
					this.id = this.$route.query.id;
				}
				axios.get('/api/plan-market/order-page?order_page_id='+this.id)
					.then(response => {
						if(response.data.msg.code == 0){
							
							that.shopform = response.data.data

						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	//大于600
	@media screen and (min-width: 600px) {
	  .ordergo{background: #efefef;
	  	.productSeeall{ width: 600px !important; margin: 0 auto; background: #FFFFFF; 
			.img{ 
				img{width: 100%; border-radius: 3px;}
			}  
			.m20{ padding: 0.2rem;}
		}
	   }
	}
	@media screen and (max-width: 600px) {
	  .ordergo{background: #efefef;
	  	.productSeeall{ width: 100% !important; margin: 0 auto; background: #FFFFFF; padding-bottom: 1rem;
			.img{ 
				img{width: 100%; border-radius: 3px;}
			}  
			.m20{ padding: 0.2rem 0.4rem;}
			.gxb{ width: 100%; text-align: center;
				i{ margin-right: 10px;}
			}
			.me{ padding: 0.5rem 0;
				.xian{ border-bottom: 1px #eaeaea solid; padding: 1rem 0; font-size: 14px; font-weight: bold;
					span{ margin: 0 0.5rem; position: relative; top: -0.1rem;}
				}
				.el-form-item{ margin-bottom: 0;}
				.el-form-item__label{font-size: 14px;}
				.el-input__inner{ border: none;  font-size: 14px;}
				.is-disabled{ background: #FFFFFF !important;}
				.el-input__inner{ background: #FFFFFF !important;}
				.el-cascader{ width: 100%;}
				.bor{ border-bottom: 1px #eaeaea solid; padding-bottom: 1rem;}
				.ch{ color: #606266; padding-left: 16px; display: flex; justify-content: space-between;
					i{ margin: 0 0.5rem; }
				}
			}
			.tijiao{ text-align: center; margin-top: 0.5rem;}
			// .van-picker{ width: 100%; left: 0; bottom: 0; position: fixed;}
		}
	   }
	}
</style>
